<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
    <meta name="format-detection" content="telephone-no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, 
                minimum-scale=1, maximum-scale=1, width=device-width, 
                height=device-height, target-densitydpi=device-dpi">
                
	<title>jQuery Mobile Web App</title>

<!--<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>-->



<link rel="stylesheet" href="_js/jquery.mobile-1.3.0.min.css" />
<link href="jquery-mobile/main.css" rel="stylesheet" type="text/css"/>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="_js/cordova.ios.js"></script>

<!--<script src="http://debug.phonegap.com/target/target-script-min.js#haas"></script></head>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>-->

 
<body> 

<!-- ++++----++++----++++-- Main Page --++++----++++----++++ -->

<div id="home" data-role="page" data-theme="d" >
        <div data-role="header" data-position="fixed" data-id="vs_header" class="mainHeader">
        	<h1>Haas Center</h1>
                <a href="#info" data-icon="info" data-iconpos="bottom" data-rel="dialog" class="ui-btn-right bigButton" >  &nbsp;&nbsp;&nbsp;Info&nbsp;&nbsp;&nbsp;</a>
        </div><!-- end of header --> 
        
                <!-- data-iconpos="notext" ( add after data-icon="" to desable text-->
                <!-- data-iconpos="right"  class="ui-btn-right" changes button location-->
                <!-- data-transition="flip" ,pop fade turn flow slidefade slideup none -->
                <!-- data-fullscreen="true" hides header and footer when screen double clicked-->
                <!-- data-id="vs_footer" stops header and footer from flickering -->

                <div id="mainNav" data-role="controlgroup" class="mainNav" >
                  <a href="#nation" class="big" data-role="button" data-theme="b" >Nation</a>
                  <a href="#florida" class="big" data-role="button" data-theme="b" >Florida</a>
                  <a href="#msa" class="big" data-role="button" data-theme="b" >Florida by MSA's</a>
                </div>
            
	<!--<div data-role="footer" data-id="vs_footer" data-position="fixed" class="footer">
	</div>-->
    
   
</div><!-- end of main page div -->

<!-- ++++----++++----++++-- Nation --++++----++++----++++ -->
            
            <div id="nation" data-role="page" data-theme="d" >
                <div data-role="header" data-position="fixed" data-id="vs_header" class="mainHeader">
                    <h1>Nation</h1>
                    <a class="bigButton" href="#home" data-icon="home" data-iconpos="bottom">&nbsp;Home&nbsp;</a>
                    <a class="bigButton" href="#info" data-icon="info" data-iconpos="bottom">&nbsp;&nbsp;&nbsp;Info&nbsp;&nbsp;&nbsp;</a><!--data-iconpos="notext" ( add after data-icon="" to desable text-->
                </div>
                
	<div data-role="content" data-theme="d">
    	<div data-role="collapsible-set" class="navNation" >	
                
                <div data-role="collapsible" data-theme="b">	
                    <h3>Labor Market</h3>
					        <ul data-role="listview" data-theme="c"  data-split-icon="info" data-inset="false" >
                                <li><a href="#msa01" data-icon="">Industry Job Openings</a>
                                <a href="#info01" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>
                                <li><a href="#msa12" data-icon="">Employment</a>
                                <a href="#info02" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                                
                                <li><a href="#msa13" data-icon="">Unemployment</a>
                                <a href="#info03" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                                   
            		    	</ul>
                     
                </div><!-- collapsible -->  
                          
                <div data-role="collapsible" data-theme="b">	
                    <h3>Real Estate</h3>
                            <ul data-role="listview" data-theme="c" data-inset="false" data-split-icon="info" >
                                <li><a href="#msa02" data-icon="">CS Index</a>
                                <a href="#info11" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>
                                <li><a href="#msa04" data-icon="">Rates</a>
                                <a href="#info11" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>
                                <li><a href="#msa05" data-icon="">Permits</a>
                                <a href="#info11" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                                 
            		    	</ul> 
                                    
                </div><!-- collapsible -->            
                 <div data-role="collapsible" data-theme="b">	
                    <h3>Economic Indicators</h3>
                            <ul data-role="listview" data-theme="c" data-inset="false" data-split-icon="info">
                                <li><a href="#msa09" data-icon="">Inflation</a>
                                <a href="#info21" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                               
                                <li><a href="#msa10" data-icon="">GDP</a>
                                <a href="#info22" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>
                                <li><a href="#msa18" data-icon="">Durable Goods</a>
                                <a href="#info23" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                                
                                <li><a href="#msa19" data-icon="">Retail Sales</a>
                                <a href="#info24" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                                
            		    	</ul>
                     
                </div><!-- collapsible --> 
                <div data-role="collapsible" data-theme="b">	
                    <h3>Commodity Prices</h3>
                            <ul data-role="listview" data-theme="c" data-inset="false" data-split-icon="info">
                                <li><a href="#msa03" data-icon="">Natural Gas</a>
                                <a href="#info31" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>
                                <li><a href="#msa06" data-icon="">Crude Oil</a>
                                <a href="#info32" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                                
                                <li><a href="#msa07" data-icon="">Gas</a>
                                <a href="#info33" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>
                                <li><a href="#msa14" data-icon="">Copper</a>
                                <a href="#info34" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>
                                <li><a href="#msa15" data-icon="">Gold</a>
                                <a href="#info35" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a></li>                                  
            		    	</ul>
                     
                </div><!-- collapsible --> 
 
      
        </div><!-- collapsible chain -->	
	</div>
  
  </div><!-- content -->
  
	</div>
</div><!-- end of page Nation div -->

<!-- ++++----++++----++++-- Labor Market Information Dialogs, must be outside of page div --++++----++++----++++ -->

    <div id="info01" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Industry Job Openings</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Current industry job openings discription.</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info02" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Employment</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Current employment rate discription.</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info03" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Unemployment</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Current unemployment rate discription.</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->

<!-- ++++----++++----++++-- Real Estate Information Dialogs, must be outside of page div --++++----++++----++++ -->

    <div id="info11" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>CS Index</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info12" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Rates</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info13" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Permits</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->

<!-- ++++----++++----++++-- Economic Indicators Information Dialogs, must be outside of page div --++++----++++----++++ -->

    <div id="info21" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Inflation</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info22" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>GDP</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info23" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Durable Goods</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
    
    <div id="info24" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Retail Sales</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->

<!-- ++++----++++----++++-- End of Information Dialogs --++++----++++----++++ -->

<!-- ++++----++++----++++-- Commodity Prices --++++----++++----++++ -->



<!-- ++++----++++----++++-- Commodity Prices Information Dialogs, must be outside of page div --++++----++++----++++ -->

    <div id="info31" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Natural Gas</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info32" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Crude Oil</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info33" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Gas</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
    
    <div id="info34" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Copper</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
    
        <div id="info35" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Gold</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->

<!-- ++++----++++----++++-- End of Information Dialogs --++++----++++----++++ -->

<!-- ++++----++++----++++-- FLORIDA --++++----++++----++++ -->

<div id="florida" data-role="page" data-theme="d" >
	<div data-role="header" data-position="fixed" data-id="vs_header" class="mainHeader">
		<h1>Florida</h1>
        <a class="bigButton" href="#home" data-icon="home" data-iconpos="bottom">&nbsp;Home&nbsp;</a>        
        <a class="bigButton" href="#info" data-icon="info" data-iconpos="bottom">&nbsp;&nbsp;&nbsp;Info&nbsp;&nbsp;&nbsp;</a><!--data-iconpos="notext" ( add after data-icon="" to desable text-->
	</div>

<!-- ++++----++++----++++-- TEMP --++++----++++----++++ -->

	<div data-role="content">
    
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Labor Market</li>
                <li><a href="index.html">
                    <h2>Employment</h2>
                    <p>Real growth and percent change in employment. </p>
                </a></li>
                <li><a href="index.html">
                    <h2>Unemployment</h2>
                    <p>Percent change in unemployment</p>
                </a></li>
            <li data-role="list-divider">Real Estate</li>
                <li><a href="index.html">
                    <h2>Permits</h2>
                    <p>Numbers on permits pulled. </p>
                </a></li>
            <li data-role="list-divider">Economic Indicators</li>
                <li><a href="index.html">
                    <h2>Retail Sales</h2>
                    <p>An aggregated measure of the sales of retail goods over a period of time.</p>
                </a></li>
                <li><a href="index.html">
                    <h2>Durable Goods</h2>
                    <p>Durable Goods yield utility over time rather than being completely </p>
                    <p>consumed in one use.</p>
                </a></li>
                <li><a href="index.html">
                    <h2>Gross Domestic Product</h2>
                    <p>GDP is the market value of all officially recognized final goods and </p>
                    <p>services produced within a country in a given period of time.</p>
                </a></li>
        </ul>
  </div><!-- content -->

<!-- ++++----++++----++++-- TEMP --++++----++++----++++ -->
   
	<!--<div data-role="content">
	
  
  			<div id="mainNav1" data-role="controlgroup" class="mainNav" >
                  <a href="#laborMarket1" class="big" data-role="button" data-theme="b">Labor Market</a>
                  <a href="#realEstate1" class="big" data-role="button" data-theme="b">Real Estate</a>
                  <a href="#economicIndicators1" class="big" data-role="button" data-theme="b">Economic Indicators</a>
            </div>
  
  </div> content -->
</div>
<!-- ++++----++++----++++--  Florida - Labor Market --++++----++++----++++ -->

<div id="laborMarket1" data-role="page" data-theme="d" >
	<div data-role="header" data-position="fixed" data-id="vs_header" class="mainHeader">
		<h1>Commodity Prices</h1>
        <a href="#home" data-icon="home" data-iconpos="bottom">&nbsp;Home&nbsp;</a>        
        <a href="#florida" data-icon="back" data-iconpos="bottom">&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;</a><!--data-iconpos="notext" ( add after data-icon="" to desable text-->
	</div>

    <ul id="mainNav1" data-role="listview"  data-theme="b" data-split-icon="info" data-split-theme="b" data-inset="true" >
        <li><a href="#"><h2>Employment</h2></a>
            <a href="#info41" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a>
        </li>
        <li><a href="#"><h2>Unemployment</h2></a>
            <a href="#info42" data-rel="dialog" data-position-to="window" data-transition="slide">Info</a>
        </li>
    </ul>
</div><!-- end of page Florida Labor Market div  -->

<!-- ++++----++++----++++-- Florida - Labor Market Information Dialogs, must be outside of page div --++++----++++----++++ -->

    <div id="info41" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Employment</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->
  
    <div id="info42" data-role="dialog" data-theme="c">
      <div data-role="header">
          <h2>Unemployment</h2>
      </div><!-- header --> 
         <div data-role="content">
              <p>Insert proper discription here!</p>                		    
         </div>
      <div data-role="footer" >      
          <p>&nbsp;</p>
      </div><!-- header -->   
    </div><!-- dialog -->




<!-- ++++----++++----++++-- Florida by MSA --++++----++++----++++ -->

<div id="msa" data-role="page" data-theme="d" >
	<div data-role="header" data-position="fixed" data-id="vs_header" class="mainHeader">
		<h1>Florida MSA's</h1>
        <a class="bigButton" href="#home" data-icon="home" data-iconpos="bottom">&nbsp;Home&nbsp;</a>
        <a class="bigButton" href="#info" data-icon="info" data-iconpos="bottom">&nbsp;&nbsp;Info&nbsp;&nbsp;</a><!--data-iconpos="notext" ( add after data-icon="" to desable text-->
	</div>
	<div data-role="content" data-theme="d">
    	<div data-role="collapsible-set" class="navNation" >	

                
                <div data-role="collapsible" data-theme="b">	
                    <h3>West Florida</h3>
					        <ul data-role="listview" data-theme="c" data-inset="false" >
                                <li><a href="#msa01" data-icon="">Crestview</a></li>
                                <li><a href="#panamaCity" data-icon="">Panama City</a></li>                                
                                <li><a href="#msa13" data-icon="">Pensacola</a></li>
                                <li><a href="#msa17" data-icon="">Tallahassee</a></li>                                     
            		    	</ul>
                     
                </div><!-- collapsible -->  
                          
                <div data-role="collapsible" data-theme="b">	
                    <h3>North Florida</h3>
                            <ul data-role="listview" data-theme="c" data-inset="false">
                                <li data-icon="search"><a href="#msa02" data-icon="">Daytona Beach</a></li>
                                <li><a href="#msa04" data-icon="">Gainesville</a></li>
                                <li><a href="#msa05" data-icon="">Jacksonville</a></li>
                                <li><a href="#msa08" data-icon="">Ocala</a></li>
                                <li><a href="#msa11" data-icon="">Palm Coast</a></li>                                 
            		    	</ul> 
                                    
                </div><!-- collapsible -->            
                 <div data-role="collapsible" data-theme="b">	
                    <h3>Central Florida</h3>
                            <ul data-role="listview" data-theme="c" data-inset="false">

                                <li><a href="#msa09" data-icon="">Orlando</a></li>                               
                                <li><a href="#msa10" data-icon="">Palm Bay</a></li>
                                <li><a href="#msa18" data-icon="">Tampa</a></li>                                
                                <li><a href="#msa19" data-icon="">Winter Heaven</a></li>
                                <li><a href="#msa20" data-icon="">Vero Beach</a></li>                                 
            		    	</ul>
                     
                </div><!-- collapsible --> 
                <div data-role="collapsible" data-theme="b">	
                    <h3>South Florida</h3>
                            <ul data-role="listview" data-theme="c" data-inset="false">
                                <li><a href="#msa03" data-icon="">Fort Myers</a></li>
                                <li><a href="#msa06" data-icon="">Miami</a></li>                                
                                <li><a href="#msa07" data-icon="">Naples</a></li>
                                <li><a href="#msa14" data-icon="">Port St. Lucie</a></li>
                                <li><a href="#msa15" data-icon="">Punta Gorda</a></li>
                                <li><a href="#msa16" data-icon="">Sarasota</a></li>                                  
            		    	</ul>
                     
                </div><!-- collapsible --> 
 
      
        </div><!-- collapsible chain -->	
	</div>
	<!--<div data-id="vs_footer" data-position="fixed" data-hide-during-focus=""  data-tap-toggle="false" data-role="footer">
        	<div data-role="navbar" data-grid="c">
  
                   <ul>
                    <li><a href="#home" class="footer">One</a></li>
                    <li><a href="#page2" class="footer">Two</a></li>
                    <li><a href="#page3" class="footer">Three</a></li>
                    <li><a href="#" class="footer">Four</a></li>
                </ul>
            </div> /navbar 
    </div>-->
</div><!-- end of page 4 div -->

<!-- ++++----++++----++++-- Florida by MSA Selection Page--++++----++++----++++ -->

<div id="panamaCity" data-role="page" data-theme="d" >
	<div data-role="header" data-position="fixed" data-id="vs_header" class="mainHeader">
		<h1>Crestview MSA</h1>
        <a href="#home" data-icon="home" data-iconpos="bottom">&nbsp;Home&nbsp;</a>        
        <a href="#info" data-icon="info" data-iconpos="bottom">&nbsp;&nbsp;&nbsp;Info&nbsp;&nbsp;&nbsp;</a><!--data-iconpos="notext" ( add after data-icon="" to desable text-->
	</div>
    
	<div data-role="content">
    
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Labor Market</li>
                <li><a href="index.html">
                    <h2>Employment</h2>
                    <p>Real growth and percent change in employment. </p>
                </a></li>
                <li><a href="index.html">
                    <h2>Unemployment</h2>
                    <p>Percent change in unemployment</p>
                </a></li>
                <li><a href="index.html">
                    <h2>FL Bed Tax</h2>
                    <p>The Tourist Development Tax is a local sales tax on transient rentals. </p>
                </a></li>
            <li data-role="list-divider">Economic Indicators</li>
                <li><a href="index.html">
                    <h2>Retail Sales</h2>
                    <p>An aggregated measure of the sales of retail goods over a period of time.</p>
                </a></li>
                <li><a href="index.html">
                    <h2>Durable Goods</h2>
                    <p>Durable Goods yield utility over time rather than being completely </p>
                    <p>consumed in one use.</p>
                </a></li>
                <li><a href="index.html">
                    <h2>Gross Domestic Product</h2>
                    <p>GDP is the market value of all officially recognized final goods and </p>
                    <p>services produced within a country in a given period of time.</p>
                </a></li>
        </ul>
  </div><!-- content -->
</div><!-- end of page panamaCity div -->

<!-- ++++----++++----++++--  --++++----++++----++++ -->

<div id="info" data-role="dialog" data-theme="c"><!-- must be outside of main div -->
        	<div data-role="header">
            	<h1>Haas Center</h1>
            </div><!-- header --> 
                   <div data-role="content">
                    	<p>The Haas Center is a research and consulting arm of the University of West Florida that engages in applied research and strategy development in economics, and across the social sciences.</p>
                   		<p>1170 Martin Luther King Jr. Blvd.</p>
                        <p>Fort Walton Beach, FL 32547</p>
                        <p>Phone# 850-863-6552</p>
                        
                   </div>
        	<div data-role="footer" >
                    	<div data-role="navbar" data-grid="b" >
                <ul>
                    <li><a href="https://www.facebook.com/Haas.Center.UWF" data-role="button" data-transition="" data-iconpos="" data-icon="">Facebook</a></li>
                    <li><a href="https://twitter.com/Haas_Info" data-role="button" data-transition="" data-iconpos="" data-icon="">Twitter</a></li>
                    <li><a href="http://haas.uwf.edu/" data-role="button" data-transition="" data-iconpos="" data-icon="">Home</a></li>

                </ul>
            </div><!-- /navbar 
                <div data-role="controlgroup" data-type="horizontal" data-theme="c">
 
                        <a href="https://www.facebook.com/Haas.Center.UWF" data-role="button" data-transition="" data-iconpos="" data-icon="">Facebook</a>
                        <a href="https://twitter.com/Haas_Info" data-role="button" data-transition="" data-iconpos="" data-icon="">Twitter</a>
                        <a href="http://haas.uwf.edu/" data-role="button" data-transition="" data-iconpos="" data-icon="">Home</a>    
                </div>--><!-- links to pages  -->

 
    </div>   
        </div><!-- info page -->
           <div id="msa01" data-role="dialog" data-theme="c"><!-- must be outside of main div -->
        	<div data-role="header" data-theme="b">
            	<h1>Crestview MSA</h1>
                <a href="#home" data-icon="home" data-transition="">Home</a>
            </div><!-- header --> 
                   
                        <div data-role="content">
                            <h1>Northwest Florida Unemployment Rate</h1>
                                <p>The unemployment rates depicted in the charts are seasonally adjusted. We take into account recessions, represented as gray columns, and hurricanes, represented as black lines. Unemployment rates are also compared to Florida state and national percentages.</p>	
                                <p>DZ stuff</p>
                        </div><!-- content -->
                        
                   
        	<div data-role="footer" data-theme="b"> 
           	 <p><i class="icon-globe"   ></i></p>
            </div>  
      	  </div><!-- info page -->

</body>
</html>